<!-- This file was originally written by Tanya Crenshaw -->
<!-- This file is the main HTML page for our prototype. It contains all the imports for -->
<!-- the libraries for d3 and googleapi as well as the local javascript files -->
<!-- Modified by Chris Lewis and Sam Burich on 9/15/2011 -->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Visualisation Prototype</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.6"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?1.29.6"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="map.js"></script>
    <script type="text/javascript" src="zip60450.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body onload="initialize()"> <!-- specifies a JS to be executed when the event occurs -->
    <h1>Morris, IL  60450</h1>
    <div id="wrap">
  	    <!-- Creating a container for the map of Morris, IL -->
        <div id="map_canvas"></div>
        
        <!-- Creating containers for the barchart -->
        <div class="info">
            <h1> Demographics for 60450 </h1>
            <div class = "leftSide"></div>
            <div class = "rightSide"></div>
            <script type="text/javascript" src="barchart.js"></script>
        </div>        
		<!-- Creating a container for the pie chart -->
        <div id ="pie_canvas">
        	<p class = "pieText">Pie Chart</p>
        </div>
        <script type="text/javascript" src="piechart.js"></script>
        <!-- Creating a container for the us map -->
        <div id="usmap_canvas"></div>

    </div>
</body>
</html>